<template>
    <div class="main-content">
        <div class="wrapper banner">
            <Carousel
                v-model="carousel"
                :autoplay="setting.autoplay"
                :autoplay-speed="setting.autoplaySpeed"
                :dots="setting.dots"
                :radius-dot="setting.radiusDot"
                :trigger="setting.trigger"
                :arrow="setting.arrow">
                <CarouselItem v-for="carousel in carouselList" :key="carousel.id">
                    <img :src="carousel.uploads.url"/>
                </CarouselItem>
            </Carousel>
        </div>
        <div class="wrapper legal-dividers">
            <h2 class="wr-title"><span>注册法规</span></h2>
            <div class="content-block ld-block">
                <ul>
                    <transition @beforeEnter="beforeEnter" @enter="enter" :key="index" v-for="(item,index) in ldList" >
                        <li :delay="index+1" class="ld-item" v-show="ldBlcok" @mouseenter="item.linkShow = true" @mouseleave="item.linkShow = false">
                            <div class="circle">
                                <img :src="item.icon"/>
                            </div>
                            <p class="card-word">{{item.name}}</p>
                            <transition name="fade">
                                <div class="layer" v-show="item.linkShow">
                                    <a @click="linkTo(item.id)">查看</a>
                                </div>
                            </transition>
                            <a href="javascript:;" class="layer-in-mobile" @click="linkTo(item.id)"></a>
                        </li>
                    </transition>
                    <!-- <transition @beforeEnter="beforeEnter" @enter="enter">
                        <li delay="1" class="ld-item" v-show="ldBlcok">
                            <div class="circle">
                                <img src="../../assets/images/icon/book.png"/>
                            </div>
                            <p class="card-word">主流国家法规</p>
                        </li>
                    </transition><transition @beforeEnter="beforeEnter" @enter="enter">
                        <li delay="2" class="ld-item" v-show="ldBlcok">
                            <div class="circle">
                                <img src="../../assets/images/icon/pen.png"/>
                            </div>
                            <p class="card-word">GMP专题指南</p>
                        </li>
                    </transition><transition @beforeEnter="beforeEnter" @enter="enter">
                        <li delay="3" class="ld-item" v-show="ldBlcok">
                            <div class="circle">
                                <img src="../../assets/images/icon/learn.png"/>
                            </div>
                            <p class="card-word">其他国家法规</p>
                        </li>
                    </transition><transition @beforeEnter="beforeEnter" @enter="enter">
                        <li delay="4" class="ld-item" v-show="ldBlcok">
                            <div class="circle">
                                <img src="../../assets/images/icon/teach.png"/>
                            </div>
                            <p class="card-word">药品注册培训</p>
                        </li>
                    </transition> -->
                </ul>
            </div>
        </div>
        <div class="news">
            <div class="wrapper">
                <h2 class="wr-title"><span>新闻资讯</span></h2>
                <div class="content-block news-block">
                    <ul>
                        <li class="news-item" v-for="item in newsList">
                            <div class="date">
                                <span class="day">{{item.date}}</span>
                                <span class="year-and-month">{{item.year_month}}</span>
                            </div>
                            <div class="news-content">
                                <div class="news-title">{{item.name}}</div>
                                <div class="news-main" v-html="item.content"></div>
                                <router-link :to="{path:'/news-content',query:{q:item.id}}" class="news-more">查看详情</router-link>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="wrapper terms">
            <h2 class="wr-title"><span>术语学习</span></h2>
            <div class="terms-block">
                <div class="btn-group">
                    <a class="btn btn-azure" :class="{'btn-active':!termCh}" @click="termCh = false">英文</a>&nbsp;&nbsp;&nbsp;&nbsp;
                    <a class="btn btn-azure" :class="{'btn-active':termCh}" @click="termCh = true">中文</a>&nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="/term" class="btn btn-azure">更多</a>
                </div>
                <transition-group @beforeEnter="termBeforeEnter" @enter="termEnter" class="clearfix" tag="ul">
                    <li class="terms-item" :index="index" :key="index" v-show="terms" v-for="(term,index) in termList" >
                        <div v-show="!termCh">
                            <p class="term-name">{{term.en}}</p>
                            <p class="term-explain" :title="term.en_define">{{term.en_define}}</p>
                            <p class="from">Source:{{term.source}}</p>
                        </div>
                        <div v-show="termCh">
                            <p class="term-name">{{term.zh}}</p>
                            <p class="term-explain" :title="term.zh_define">{{term.zh_define}}</p>
                            <p class="from">来源：{{term.source}}</p>
                        </div>
                    </li>
                </transition-group>
            </div>
        </div>
        <div class="wrapper questions">
            <h2 class="wr-title"><span>问答专区</span></h2>
            <div class="questions-block">
                <div class="btn-group">
                    <a class="btn btn-azure" :class="{'btn-active':!questionsCh}" @click="questionsCh = false">英文</a>&nbsp;&nbsp;&nbsp;&nbsp;
                    <a class="btn btn-azure" :class="{'btn-active':questionsCh}" @click="questionsCh = true">中文</a>&nbsp;&nbsp;&nbsp;&nbsp;
                    <a class="btn btn-azure" href="/questions">更多</a>
                </div>
                <transition-group class="clearfix" tag="ul">
                    <li class="question-item" :index="index" :key="index" v-show="questions" v-for="(item,index) in questionslist">
                        <div v-show="!questionsCh">
                            <div class="ask" :title="item.en_q">{{item.en_q}}</div>
                            <div class="answer" :title="item.en_a">{{item.en_a}}</div>
                        </div>
                        <div v-show="questionsCh">
                            <div class="ask" :title="item.zh_q">{{item.zh_q}}</div>
                            <div class="answer" :title="item.zh_a">{{item.zh_a}}</div>
                        </div>
                    </li>
                </transition-group>
            </div>
        </div>
        <div class="wrapper">
            <h2 class="wr-title"><span>友情链接</span></h2>
            <div class="content-block link-block">
                <ul style="margin-bottom:45px;">
                    <li class="link-item" v-for="link in linkList.slice(0,4)" @mouseenter="link.linkShow = true" @mouseleave="link.linkShow = false">
                        <div class="link-cell">
                            <div class="link-name">{{link.name}}</div>
                            <div class="link-logo"><img :src="link.image" /></div>
                        </div>
                        <transition name="fade">
                            <div class="layer" v-show="link.linkShow">
                                <a :href="link.src" target="_blank">访问</a>
                            </div>
                        </transition>
                    </li>
                </ul>
                <ul>
                    <li class="link-item" v-for="link in linkList.slice(4,8)" @mouseenter="link.linkShow = true" @mouseleave="link.linkShow = false">
                        <div class="link-cell">
                            <div class="link-name">{{link.name}}</div>
                            <div class="link-logo"><img :src="link.image" /></div>
                        </div>
                        <transition name="fade">
                            <div class="layer" v-show="link.linkShow">
                                <a :href="link.src" target="_blank">访问</a>
                            </div>
                        </transition>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>
<script type="text/javascript">
    var Velocity = require("velocity-animate");
    import { format } from '../../utils/utils.js';
    export default{
        data(){
            return{
                carousel:0,
                carouselList:[],
                setting: {
                    autoplay: true,
                    autoplaySpeed: 3000,
                    dots: 'inside',
                    radiusDot: false,
                    trigger: 'click',
                    arrow: 'hover'
                },
                linkList:[
                    {
                        name:'FDA',
                        image:require('../../assets/images/icon/fda.png'),
                        src:'https://www.fda.gov/',
                        linkShow:false,
                    },
                    {
                        name:'EMA',
                        image:require('../../assets/images/icon/ema.png'),
                        src:'http://www.ema.europa.eu/ema/',
                        linkShow:false,
                    },
                    {
                        name:'ICH',
                        image:require('../../assets/images/icon/ich.png'),
                        src:'http://www.ich.org/home.html',
                        linkShow:false,
                    },
                    {
                        name:'PIC/S',
                        image:require('../../assets/images/icon/pics.png'),
                        src:'https://picscheme.org/',
                        linkShow:false,
                    },
                    {
                        name:'WHO',
                        image:require('../../assets/images/icon/who.png'),
                        src:'http://www.who.int/en/',
                        linkShow:false,
                    },
                    {
                        name:'PDA',
                        image:require('../../assets/images/icon/pda.png'),
                        src:'https://www.pda.org/',
                        linkShow:false,
                    },
                    {
                        name:'EDQM',
                        image:require('../../assets/images/icon/edqm.png'),
                        src:'http://www.edqm.eu/',
                        linkShow:false,
                    },
                    {
                        name:'CFDA',
                        image:require('../../assets/images/icon/cfda.png'),
                        src:'http://www.sfda.gov.cn/WS01/CL0001/',
                        linkShow:false,
                    },
                ],
                ldBlcok:false,
                terms:false,
                termList:[],
                termsLoadDone:false,
                questions:false,
                questionslist:[],
                questionsLoadDone:false,
                newsList:[],
                termCh:false,
                questionsCh:false,
                ldList:[{
                    name:'主流国家法规',
                    icon:require('../../assets/images/icon/book.png'),
                    linkShow:false,
                },{
                    name:'GMP专题指南',
                    icon:require('../../assets/images/icon/pen.png'),
                    linkShow:false,
                },{
                    name:'其他国家法规',
                    icon:require('../../assets/images/icon/learn.png'),
                    linkShow:false,
                },{
                    name:'药品注册培训',
                    icon:require('../../assets/images/icon/teach.png'),
                    linkShow:false,
                }]
            }
        },
        computed:{
            categoryList(){
                return this.$store.state.lawData.children;
            },
        },
        mounted(){
            this.ldBlcok = true;
            window.addEventListener('scroll', this.handleScroll);
            this.initNews();
            var interval = setTimeout(_=>{
                if(this.categoryList){
                    this.insertStatute();
                }
            },1000);
            this.initCarousel();
        },
        methods:{
            initCarousel(){
                this.$http.get('/carousel/list')
                .then(res=>{
                    this.carouselList = res.data.data;
                })
            },
            insertStatute(){
                this.categoryList.forEach((cl,index)=>{
                    this.ldList.forEach((ld,index)=>{
                        if(cl.name == ld.name){
                            ld.id = cl.id;
                        }
                    })
                });
            },
            linkTo(id){
                location.href = '/statute?q='+id;
            },
            beforeEnter:function(el){
                el.style.opacity = 0;
                el.style.top = '-10px';
            },
            enter: function (el, done) {
                const delay = el.getAttribute('delay')*500;
                Velocity(el, {
                    opacity: 1,
                    top:0
                },{
                    duration: 450,
                    delay:delay
                });
                done();
            },
            termBeforeEnter(el){
                const index = el.getAttribute('index');
                el.style.opacity = 0;
                if(index%2 == 0){
                    el.style.left = '-10px';
                }else{
                    el.style.left = '10px';
                }
            },
            termEnter(el,done){
                if(this.termsLoadDone){
                    const index = el.getAttribute('index')*500;
                    Velocity(el, {
                        opacity: 1,
                        left:0
                    },{
                        duration: 450,
                        delay:index
                    });
                    done();
                }

            },
            handleScroll() {
                var terms = document.getElementsByClassName('terms');
                var questions = document.getElementsByClassName('questions');
                if(window.scrollY >= terms[0].offsetTop - 300 && !this.termsLoadDone){
                    this.initTerms();
                    this.termsLoadDone = true;
                }
                if(window.scrollY >= questions[0].offsetTop - 300 && !this.questionsLoadDone){
                    this.initQuestionsList();
                    this.questionsLoadDone = true;
                }
            },
            initTerms(){
                this.termList = [{
                    en:'Batch records',
                    en_define:'All documents associated with the manufacture of a batch of bulk product or ﬁnished product. They provide a history of each batch of product and of all circumstances pertinent to the quality of the ﬁnal product.',
                    zh:'批记录',
                    zh_define:'与散装产品或成品的批生产相关的所有文件。它们提供了产品每一批次的历史及与成品质量相关的所有情况。',
                    source:'WHO'
                },{
                    en:'Bioequivalence',
                    en_define:'When two medicines release the same active ingredient into the body at the same rate and to the same extent under similar conditions.',
                    zh:'生物等效性',
                    zh_define:'两种药物在同样条件下释放相同的活性成分到人体中，具有相同的吸收速率和吸收程度',
                    source:'EMA'
                },{
                    en:'Cell bank',
                    en_define:'A cell bank is a collection of appropriate containers, whose contents are of uniform composition, stored under defined conditions. Each container represents an aliquot of a single pool of cells.',
                    zh:'细胞库',
                    zh_define:'细胞库是储存在规定条件下，内容物组成均一的合适的容器集合。每个容器代表一个单一细胞库的一等份。',
                    source:'ICH Q5D'
                },{
                    en:'Calibration',
                    en_define:'The demonstration that a particular instrument or device produces results within specified limits by comparison with those produced by a reference or traceable standard over an appropriate range of measurements.',
                    zh:'校正',
                    zh_define:'特定仪器或设备产生的在规定限度内的结果，与经参考或可追溯标准产生的结果进行对比，超出合适测量范围的实证。',
                    source:'ICH Q7'
                },{
                    en:'Deviation',
                    en_define:'Departure from an approved instruction or established standard.',
                    zh:'偏差',
                    zh_define:'偏离已批准的指令或已确立的标准。',
                    source:'WHO'
                },{
                    en:'Impurity',
                    en_define:'Any component of the drug substance or drug product that is not the drug substance or an excipient. ',
                    zh:'杂质',
                    zh_define:'原料药或制剂中的任何非原料药或辅料的成分。',
                    source:'ICH M7'
                }]
                this.terms = true;
            },
            initQuestionsList(){
                this.questionslist = [{
                    en_q:'Are on-site audits required in the evaluation of suppliers?',
                    en_a:'No.  An on-site audit is not required; however, an on-site audit could be a useful tool in the evaluation of a supplier.  A risk assessment of the material or the service provided can be used to develop an audit strategy and manage the ongoing evaluation of suppliers [ICH Q7, Sections 7.11, 7.31].',
                    zh_q:'对供应商进行评估时是否需要进行现场审计？',
                    zh_a:'不需要。现场审计是不需要的，但是，现场审计在供应商的评估中可能是一个很有用的工具。可以对原料或供应商提供的服务进行风险评估，来建立现场审计策略，管理供应商的评估【ICH Q7第7.11，7.13部分】。'
                },{
                    en_q:'Why does ICH Q7 permit the use of a packaging system for reserve/retention samples that is ‘more protective than the marketed packaging system’ [ICH Q7, Section 11.72]?',
                    en_a:'Unlike stability samples, the purpose of the reserve/retention sample is not to represent the quality of the batch in the market place but to allow future evaluation of the quality of the original API batch (e.g., in evaluation of potential counterfeits, etc.).  Therefore, reserve/retention samples may be stored in packaging (and conditions) that better preserve the original state of the API.',
                    zh_q:'为什么 ICH Q7允许对留样使用“比上市包装系统更具有保护性”的包装【ICH Q7第11.72部分】？',
                    zh_a:'与稳定性样品不同，留样的目的不是为了代表上市批的质量，而是为了将来对原始的API批质量进行评估（例如，评估可能的假药等）。因此，留样可以保存在更能保存原料药原始状态的包装（和条件）中。'
                },{
                    en_q:'Can process parameters be adjusted throughout the product lifecycle?',
                    en_a:'Process parameters are studied and selected during pharmaceutical development and monitored during commercial manufacturing. Knowledge gained could be utilized for adjustment of the parameters as part of continual improvement of the process throughout the lifecycle of the drug product (see ICH Q10, Section 3.).',
                    zh_q:'产品生命周期中，生产工艺参数可以调整吗？',
                    zh_a:'生产工艺参数是在药品研发过程中研究和确定的，在商业生产过程中监测。积累的认知可以用来调整工艺参数，这是产品生命周期内的持续改进的一部分（参见ICH Q10，章节3）。'
                },{
                    en_q:'Do traditional sampling approaches apply to RTR testing?',
                    en_a:'No, traditionally sampling plans for in-process and end-product testing involve a discrete sample size that represents the minimal sampling expectations. Generally, the use of RTR testing will include more extensive on-line/in-line measurement. A scientifically sound sampling approach should be developed, justified, and implemented.',
                    zh_q:'传统的取样方法是否适用于实时放行检测？',
                    zh_a:'不适用。过程中取样和最终产品取样的传统取样计划包括代表最小取样量的离散样本量。总的来说，实时放行检测的应用包括更广泛的在线检验。企业应建立、确证和实施科学合理的取样方法。'
                },{
                    en_q:'Is a specific dedicated computerised information management system required for the implementation of knowledge management with respect to ICH Q8, Q9 and Q10?',
                    en_a:'No, but such computerised information management systems can be invaluable in capturing, managing, assessing and sharing complex data and information.',
                    zh_q:'对于ICH Q8、Q9和Q10而言，知识管理的实施需要一个专用的计算机化信息管理系统吗？',
                    zh_a:'不需要，但这样的计算机化信息管理系统可能在获得、管理、评估和共享复杂数据和信息时具有重要价值。'
                },{
                    en_q:'Does a batch numbering system need to be sequential?',
                    en_a:'No, [ICH Q7, Section 6.51] says only that batch production records should have a unique batch or ID number.',
                    zh_q:'批号编制是否需要连续？',
                    zh_a:'不需要。【ICH Q7第6.51部分】说了，只有批生产记录必须对应一个唯一的批或识别编号。'
                }];
                this.questions = true;
            },
            initNews(){
                this.$http.get('/news/list',{
                        params: {
                            page: 1,
                            category:'',
                            include:'category',
                            fe:1
                        }
                }).then(res => {
                    this.newsList = res.data.data.slice(0,3);
                    this.newsList.forEach((item,index)=>{
                        item.date = format(item.inTimes,'dd');
                        item.year_month = format(item.inTimes,'yyyy-MM');
                    })
                }).catch(err => {

                })
            }
        }
    }
</script>
<style type="text/css" scoped>
    .wrapper{ max-width: 1200px; margin:0 auto 60px;}
    .banner{ margin-top:40px;}
    .banner img{ width:100%;}

    .wr-title{ font-size: 20px; color:#333; margin-bottom: 48px;}
    .wr-title span{ border:2px solid #15ccac; width:150px; height:40px; display:flex; margin:0 auto; justify-content: center; align-items: center; background:#fff; position: relative;}
    .wr-title span:after{ content: ''; position: absolute; width:80%; background:#fff; height:2px; bottom:-2px; left:10%;}
    .content-block ul,.content-block ul{ display:flex; justify-content: space-between;}
    .ld-item{ width:220px; padding-top: 15px; border:1px solid #aaa; background:url('../../assets/images/icon/ld_bg.png') no-repeat; background-size:100%; position: relative;}
    .ld-item a{ color:#333; }
    .circle{ width:90px; height:90px; border-radius: 50%; border:1px solid #aaa; margin:0 auto; display:flex;align-items: center; justify-content: center; margin-top: 32px; transition:all 0.2s linear;}
    /* .circle:hover{ transform:translateY(-5px);} */
    .card-word{ text-align: center; margin:32px 0 43px; font-size: 16px;}

    .news{ background:#f3fbfa; width:100%; margin:20px 0;}
    .news .wrapper{ padding:20px 0;}
    .news .wrapper .wr-title span,.news .wrapper .wr-title span:after{ background:#f3fbfa;}
    .news-item{ width:30%; height:240px; position: relative; padding:25px; cursor: default;}
    .date{ width:45px; float: left;}
    .day{ font-size: 38px;}
    .year-and-month{ font-size: 12px;}
    .news-content{ margin-left: 67px;}
    .news-title{ font-size: 14px; line-height: 1.5; border-bottom: 1px solid #ccc; padding-bottom: 5px;}
    .news-main{ font-size: 12px; line-height: 1.5; margin-top:13px;
        height:54px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
    }
    .news-more{ padding:5px 10px; font-size: 14px; border:1px solid #333; display:inline-block; position: absolute; bottom:50px; color:#333;}
    .news-item,.date,.day,.year-and-month,.news-content,.news-title,.news-main,.news-more{ transition: all 0.4s ease-out;}
    .news-item:hover{ box-shadow: 0 2px 10px rgba(60,60,60,0.4);}
    .news-item:hover .news-title,
    .news-item:hover .day,
    .news-item:hover .year-and-month,
    .news-item:hover .news-title,
    .news-item:hover .news-main,
    .news-item:hover .news-more{ border-color:#15ccac; color:#15ccac;}
    .news-item .news-more:hover{ box-shadow: 0 2px 10px rgba(60,60,60,0.4); background:#15ccac; color:#fff;}

    .btn-group{ display:flex; justify-content: center;}
    .btn-azure{ border:1px solid #15ccac; color:#15ccac; border-radius: 3px; cursor:pointer;}
    /* .btn-azure{ background:#15ccac; color:#fff; } */
    .btn-active{ background:#15ccac; color:#fff;}

    .terms-block ul{ margin-top:18px; min-height:300px;}
    .terms-item{ background:#f3f3f3; padding:24px; width:48%; float: left; position: relative; height:138px; margin-bottom: 20px; transition:all 0.45s linear; border:1px solid #e5e5e5;}
    .terms-item:hover{ box-shadow:0 2px 7px rgba(0,0,0,0.1); }
    .terms-item:nth-of-type(2n-1){ margin-right: 2%;}
    .terms-item:nth-of-type(2n){ margin-left: 2%;}
    .term-name{ color:#15ccac; font-size: 16px; line-height: 1.5;}
    .term-explain{ font-size: 12px; line-height: 24px;
        height:48px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }
    .from{ position: absolute; bottom:24px; left:24px;}

    .questions-block ul{ border:4px solid #eee; margin-top:18px; min-height:398px;}
    .question-item{ width:48%; float: left; position: relative;}
    .question-item:nth-of-type(2n-1){ margin-right: 2%;}
    .question-item:nth-of-type(2n){ margin-left: 2%;}
    .ask,.answer{ padding:0 20px 0 64px; height:80px;}
    .ask{ background:url('../../assets/images/icon/ask.png') no-repeat 20px center; font-size: 16px; line-height: 1.5; padding-top:10px; padding-bottom:10px;
        height:60px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }
    .answer{ background:#eee url('../../assets/images/icon/answer.png') no-repeat 20px center; line-height: 1.5; color:#1f9480;
        padding-top:5px; padding-bottom:5px;
        height:70px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
    }
    .link-item{ width:238px; height: 150px; border: 3px solid #cdcdcd; position: relative; display: flex; align-items:center; justify-content:center;}
    .link-cell{ text-align: center;}
    .link-name{ margin-bottom: 15px; font-size: 18px;}
    .link-logo img{ margin:0 auto;}
    .layer{ position: absolute; width:100%; height:100%; background:rgba(0,0,0,0.3); left:0; top:0; display: flex; justify-content:center; align-items:center;}
    .layer a{ padding:5px 10px; border:1px solid #fff; border-radius:3px; color:#fff; transition:
        all 0.2s linear;}
    .layer a:hover{ background:#15ccac; border-color:#15ccac; }
    @media (max-width:1024px){
        .wr-title{ font-size:16px;}
        .wr-title span{ width:120px; height:30px;}
        .ld-item{ width:180px;}
        .circle{ width:70px; height:70px;}
        .circle img{ width:40px;}
        .card-word{ margin:24px 0 35px; font-size:14px;}
        .news-more{ bottom:30px;}
        .news-title{
            height:45px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
        }
        .news-main{
            height:55px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
        }

        .link-item{ width:190px; height:140px;}
        .link-name{ margin-bottom:5px;}
    }
    @media (max-width:768px){
        .wr-title{ margin-bottom:25px;}
        .ld-block ul,.news-block ul,.link-block ul{ display:block;}
        .ld-block ul li{ display:inline-block; width:25%; border:none; background:none; padding:0;}
        .circle{ margin-top:10px; width:50px; height:50px;}
        .circle img{ width:30px;}
        .card-word{ font-size:12px;}

        .news-block ul{ padding:0 15px;}
        .news-item{ width:100%; height:200px;}
        .news-more{ bottom:20px;}
        .terms-block .terms-item{ width:100%; margin:0 0 20px 0;}
        .questions-block ul{ border:0;}
        .questions-block .question-item{ width:100%; margin: 0; border-top: 1px solid #eee; border-bottom:1px solid #eee; margin-top:10px; font-size:12px;}
        .answer{ height:60px; }
        .link-block ul{ padding:0 5%; margin:0 !important;}
        .link-item{ width:48%; height:140px; display: inline-flex; margin-bottom:10px;}
        .link-item:nth-of-type(2n-1){ margin-right:4%;}
        .link-logo img{ height:70px;}

        .layer{ display: none;}
        .layer-in-mobile{ position: absolute; width:100%; height:100%; left:0; top:0;}
    }
</style>